<hotMap>
	<div ref="hotMapChart" style="height: 500px;width: 100%;"></div>
	<script>
		const echarts = require('echarts');
		require('echarts/map/js/world.js');
		require('echarts/map/js/china.js');
		require('echarts/extension/bmap/bmap');
		require('echarts/extension/dataTool');

		let tag = this;

		tag.on('mount', function() {
			tag.myChart = echarts.init(tag.refs.hotMapChart);
			console.log('hotMapChart mount', tag.opts.data);
			tag.initMap(tag.myChart, tag.opts.data);
		});

		tag.on('update', function() {
			console.log('hotMapChart update', tag.opts.data);
			tag.initMap(tag.myChart, tag.opts.data);
		});
		tag.initMap = function(myChart, data) {
			myChart.showLoading();
			if (!data) {
				return;
			}
			myChart.hideLoading();
			myChart.setOption({
				animation: false,
				bmap: {
					center: [120.13066322374, 30.240018034923],
					zoom: 14,
					roam: true,
					mapStyle: {}
				},
				visualMap: {
					show: false,
					top: 'top',
					min: 0,
					max: 5,
					seriesIndex: 0,
					calculable: true,
					inRange: {
						color: ['blue', 'blue', 'green', 'yellow', 'red']
					}
				},
				series: [{
					type: 'scatter',
					coordinateSystem: 'bmap',
					data: data,
					pointSize: 5,
					blurSize: 6
				}]
			});
			try{	
				var bmap = tag.myChart.getModel().getComponent('bmap').getBMap();
				bmap.addControl(new BMap.MapTypeControl());
			}catch(e){
				console.log(e);
			}
		}
	</script>
</hotMap>